<template>
  <div class="user-container">
    <div class="user-card">
      <van-cell>
        <template #icon>
          <img src="../../assets/logo.png" alt="" class="avatar"/>
        </template>
        <template #title>
          <span class="username">系统测试用户1</span>
        </template>
        <template #label>
          <van-tag type="warning">超级用户</van-tag>
        </template>
      </van-cell>
      <div class="user-data">
        <div class="user-data-item">
          <span>0</span>
          <span>收藏</span>
        </div>
        <div class="user-data-item">
          <span>0</span>
          <span>关注</span>
        </div>
        <div class="user-data-item">
          <span>0</span>
          <span>粉丝</span>
        </div>
      </div>
    </div>

    <!-- 操作面板 -->
    <van-cell-group class="action-card">
      <van-cell center icon="closed-eye" title="暗夜模式">
        <template #right-icon>
          <van-switch v-model="checked1" size="24"/>
        </template>
      </van-cell>
      <van-cell center icon="closed-eye" title="无痕浏览">
        <template #right-icon>
          <van-switch v-model="checked2" size="24"/>
        </template>
      </van-cell>
      <van-cell center icon="closed-eye" title="智能推荐">
        <template #right-icon>
          <van-switch v-model="checked3" size="24"/>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked1: false,
      checked2: false,
      checked3: false,
    }
  },
  watch: {
    checked(newValue, oldValue) {
      if (newValue) {

      }
    }
  }
}
</script>

<style lang="less" scoped>
.user-container {
  .user-card {
    background-color: rgba(10, 195, 252, 0.8);
    color: white;
    padding-top: 20px;

    .van-cell {
      background: rgba(10, 195, 252, 0.8);
      color: white;

      &::after {
        display: none;
      }

      .avatar {
        width: 60px;
        height: 60px;
        background-color: #fff;
        border-radius: 50%;
        margin-right: 10px;
      }

      .username {
        font-size: 14px;
        font-weight: bold;
      }
    }
  }

  .user-data {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
    padding: 30px 0;

    .user-data-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33.33%;
    }
  }

  .action-card {
    background: rgba(10, 195, 252, 1);
  }
}
</style>
